<template>
  <view class="menu-view flex flex-wrap">
    <!-- 骨架屏 -->
    <block v-if="loading">
      <view
        class="default-item"
        v-for="(item, index) in new Array(8)"
        :key="index"
      >
        <view style="padding: 0 6px">
          <u-skeleton loading rows="3" :title="false" />
        </view>
      </view>
    </block>

    <block v-else>
      <view
        class="menu-item flex flex-middle flex-center"
        v-for="(item, index) in list"
        :key="index"
        @click="toMenu(item)"
      >
        <view>
          <image :src="item.extra" mode="aspectFill" />
          <view>
            {{ item.name }}
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toMenu(item) {
      this.$store.commit("SET_CLASSIFY_ID", item.id);
      uni.navigateTo({
        url: `/pages/classify/index`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.default-item {
  width: 25%;
  margin-top: 11px;
}

.menu-item {
  width: 25%;
  text-align: center;
  color: #222;
  margin-top: 16px;

  image {
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
  }
}
</style>